import React from "react";
import { useShallow } from "zustand/react/shallow";
import { useUserStore } from "@/store/user";

interface Props {
  children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
  authority: string[];
}

const AuthButton: React.FC<Props> = ({ children, authority }) => {
  const { authButtonList } = useUserStore(useShallow((state) => ({ authButtonList: state.authButtonList })));

  if (!authority || !authority.length) return;

  const hasPermission = authButtonList.some((permission: string) => permission === "*:*:*" || authority.includes(permission));
  return <React.Fragment>{hasPermission && children}</React.Fragment>;
};

export default React.memo(AuthButton);
